<template>
  <div class="dashboard">
    <h1>Dashboard</h1>
    
    <!-- Stats Cards -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <n-icon size="40" color="var(--color-primary)">
              <PricetagsOutline />
            </n-icon>
            <div class="stat-text">
              <div class="stat-value">{{ stats.categories }}</div>
              <div class="stat-label">Categories</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <n-icon size="40" color="var(--color-secondary)">
              <ShirtOutline />
            </n-icon>
            <div class="stat-text">
              <div class="stat-value">{{ stats.products }}</div>
              <div class="stat-label">Products</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <n-icon size="40" color="var(--color-error)">
              <FlameOutline />
            </n-icon>
            <div class="stat-text">
              <div class="stat-value">{{ stats.hotProducts }}</div>
              <div class="stat-label">Hot Products</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <n-icon size="40" color="var(--color-info)">
              <ChatbubblesOutline />
            </n-icon>
            <div class="stat-text">
              <div class="stat-value">{{ stats.messages }}</div>
              <div class="stat-label">Messages</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Quick Actions -->
    <el-card class="section-card">
      <template #header>
        <h2>Quick Actions</h2>
      </template>
      
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6">
          <el-button type="primary" size="large" @click="$router.push('/products/create')" style="width: 100%;">
            <n-icon size="20" style="margin-right: 0.5rem;"><AddOutline /></n-icon>
            Add Product
          </el-button>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-button size="large" @click="$router.push('/categories')" style="width: 100%;">
            <n-icon size="20" style="margin-right: 0.5rem;"><PricetagsOutline /></n-icon>
            Manage Categories
          </el-button>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-button size="large" @click="$router.push('/messages')" style="width: 100%;">
            <n-icon size="20" style="margin-right: 0.5rem;"><ChatbubblesOutline /></n-icon>
            View Messages
          </el-button>
        </el-col>
        <el-col :xs="12" :sm="6">
          <el-button size="large" @click="$router.push('/store-settings')" style="width: 100%;">
            <n-icon size="20" style="margin-right: 0.5rem;"><SettingsOutline /></n-icon>
            Store Settings
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- Welcome Message -->
    <el-card class="welcome-card">
      <template #header>
        <h2>Welcome to Lucy African Fashion Admin</h2>
      </template>
      
      <p>Manage your online store, products, and customer inquiries from this dashboard.</p>
      
      <h3>Getting Started:</h3>
      <ul>
        <li>Configure your store information in <router-link to="/store-settings">Store Settings</router-link></li>
        <li>Add categories in <router-link to="/categories">Categories</router-link></li>
        <li>Create products in <router-link to="/products">Products</router-link></li>
        <li>Review customer messages in <router-link to="/messages">Messages</router-link></li>
      </ul>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { NIcon } from 'naive-ui'
import {
  PricetagsOutline,
  ShirtOutline,
  FlameOutline,
  ChatbubblesOutline,
  AddOutline,
  SettingsOutline
} from '@vicons/ionicons5'
import { categoryAPI, productAPI, contactAPI } from '@/api'

const stats = ref({
  categories: 0,
  products: 0,
  hotProducts: 0,
  messages: 0
})

const loadStats = async () => {
  try {
    // Load categories count
    const categoriesRes = await categoryAPI.getAll()
    stats.value.categories = categoriesRes.data?.length || 0

    // Load products count
    const productsRes = await productAPI.getAll({ limit: 1 })
    stats.value.products = productsRes.pagination?.total || 0

    // Load hot products count
    const hotRes = await productAPI.getAll({ is_hot: 1, limit: 1 })
    stats.value.hotProducts = hotRes.pagination?.total || 0

    // Load messages count
    const messagesRes = await contactAPI.getAll({ limit: 1 })
    stats.value.messages = messagesRes.pagination?.total || 0
  } catch (error) {
    console.error('Failed to load stats:', error)
  }
}

onMounted(() => {
  loadStats()
})
</script>

<style lang="scss" scoped>
.dashboard {
  h1 {
    margin-bottom: 2rem;
    color: var(--text-primary);
  }
}

.stats-row {
  margin-bottom: 2rem;
}

.stat-card {
  :deep(.el-card__body) {
    padding: 1.5rem;
  }
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-text {
  flex: 1;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.section-card,
.welcome-card {
  margin-bottom: 2rem;
  
  h2 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--text-primary);
  }
  
  h3 {
    margin: 1.5rem 0 0.75rem;
    color: var(--text-primary);
  }
  
  p {
    color: var(--text-secondary);
    line-height: 1.6;
  }
  
  ul {
    padding-left: 1.5rem;
    
    li {
      margin-bottom: 0.5rem;
      color: var(--text-secondary);
      
      a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 500;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>

